<template>
	<view class="page">
		<view style="height:60rpx;line-height:60rpx;color:#999;margin:0 20rpx;">
			订单编号：{{orderInfo.taskNumber}}
		</view>
		<view style="background-color: #fff;padding:30rpx;">
			<view style="display: flex;justify-content:space-between;">
				<view style="margin-right:20rpx;">
					<image mode="aspectFill" style="height:100rpx;width:100rpx;border-radius:15rpx;"
						:src="orderInfo.taskTypeImg"></image>
				</view>
				<view style="flex-grow:1;">
					<view style="margin-bottom: 10rpx;">
						<text style="font-size:40rpx;margin-right:10rpx;">{{orderInfo.taskTypeName}}</text>
						<text> /{{orderInfo.parentTypeName}}</text>
					</view>
					<text style="color:#999;" v-if="!!orderInfo.startDate">{{orderInfo.startDate|dateFormat}}
						<text style="padding:0 10rpx;">~</text>
						<text style="color:#999;" v-if="!!orderInfo.endDate"> {{orderInfo.endDate|dateFormat}}</text>
						<text style="color:#999;" v-if="!orderInfo.endDate">未完工</text>
					</text>
				</view>
				<text style=" font-size:24rpx;"
					:style="{color:taskStateStyle(orderInfo)}">{{orderInfo|taskStateName}}</text>
			</view>
			<u-row style="line-height:60rpx;">
				<u-col :span="4">
					<text style="color:#999;">预算</text><br /><text style="font-size:35rpx;">{{orderInfo.budget}}元</text>
				</u-col>
				<u-col :span="4">
					<text style="color:#999;">工期</text><br /><text
						style="font-size:35rpx;">{{orderInfo.duration}}天</text>
				</u-col>
				<u-col :span="4">
					<text style="color:#999;">订单总价</text><br /><text
						style="font-size:35rpx;">{{orderInfo.price}}元</text>
				</u-col>
			</u-row>
			<view
				style="margin:30rpx 0;letter-spacing:2rpx;font-size:28rpx;color:#616679;display:flex;align-items:center;">
				<u-icon size="30" name="account" style="margin-right:10rpx;"></u-icon>
				<text>{{orderInfo.contacts}}</text>
			</view>
			<view
				style="margin:30rpx 0;letter-spacing:2rpx;font-size:28rpx;color:#616679;display:flex;align-items:center;">
				<u-icon size="32" name="phone" style="margin-right:10rpx;"></u-icon><text>{{orderInfo.mobile}}</text>
			</view>
			<view
				style="margin:30rpx 0;letter-spacing:2rpx;font-size:28rpx;color:#616679;display:flex;align-items:center;">
				<u-icon size="35" name="map" style="margin-right:10rpx;"></u-icon><text>{{orderInfo.taskAddress}}</text>
			</view>
			<view style="line-height: 40rpx;color:#9195a4;">{{orderInfo.introduction||'该订单无特殊招工要求'}}</view>
			<view style="height:20rpx;"></view>
			<u-row>
				<u-col :span="4" v-for="item in taskPicture">
					<image style="width:100%;height:200rpx;border-radius:15rpx;" :src="item" mode="aspectFill">
					</image>
				</u-col>
			</u-row>
			<u-line margin="30rpx 0" color="#999" />
			<view>
				<text><text style="color:red;">*</text>已完工，请上传图片</text>
				<view style="height:20rpx;"></view>
				<u-upload ref="uUpload" width="160" height="160" :action="action" max-count="4" :show-progress="false">
				</u-upload>
			</view>
			<view>
				<text>完工图片</text>
				<view style="height:20rpx;"></view>
				<u-row>
					<u-col :span="4" v-for="item in resultPicture">
						<image style="width:100%;height:200rpx;border-radius:15rpx;" :src="item" mode="aspectFill">
						</image>
					</u-col>
				</u-row>
			</view>
		</view>
		<view>
			<view style="line-height:60rpx;color:#999;margin:0 40rpx;">评价</view>
			<view style="background-color:#fff;padding:30rpx;">
				<view>
					<text>分数：</text>
					<u-rate :count="5" v-model="orderInfo.score" active-color="#ff9b06"></u-rate>
				</view>
				<view style="margin:20rpx 0;line-height: 40rpx;color:#999;">
					{{orderInfo.scoringContent}}
				</view>
				<u-row>
					<u-col :span="4" v-for="item in scoringPicture">
						<image style="width:100%;height:200rpx;border-radius:15rpx;" :src="item" mode="aspectFill">
						</image>
					</u-col>
				</u-row>
			</view>
		</view>
		<u-toast ref="uToast" />
		<view style="height:70px;"></view>
		<view
			style="position:fixed;bottom:0;width:100%;height:50px;display:flex;line-height:50px;text-align: center;border-top: 1rpx solid #dadada;background-color: #fff;">
			<view style="padding: 0 30rpx;" @click="toChart(item)">
				<u-icon name="kefu-ermai" size="30"></u-icon>客服
			</view>
			<view style="padding: 0 30rpx;">
				<u-icon :color="!shoucang(orderInfo)?'':'#ff9900'" :name="!shoucang(orderInfo)?'star':'star-fill'"
					size="30" @click="!shoucang(orderInfo)?addShou(orderInfo):deleteShou(orderInfo)">
				</u-icon>收藏
			</view>
			<view style="padding: 0 30rpx;">
				<u-icon name="zhuanfa" size="30"></u-icon>
				<u-button :custom-style="customStyle" open-type="share" size="mini" :hair-line="false">分享</u-button>
			</view>
			<view style="color:#fff;flex-grow:1;display:flex;">
				<view v-if="orderInfo.taskState==2" style="background-color:#ff9900;flex-grow:1;" @click="quxiao()">
					取消订单</view>
				<view v-if="orderInfo.taskState==2" style="background-color:#2979ff;flex-grow:1;" @click="kaigong()">
					开 工</view>
				<view v-if="orderInfo.taskState==3" style="background-color:#19be6b;flex-grow:1;" @click="wangong()">
					完 工</view>
				<view v-if="orderInfo.taskState>3" style="background-color:#71d5a1;flex-grow:1;">已完工</view>
			</view>
			<!-- 				<view v-if="orderInfo.taskState==4" style="background-color:#ff9900;flex-grow:1;" @click="comitForm()">
					催 款</view> -->
		</view>
	</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				customStyle: {
					border: 0,
					color: '#222',
					fontSize: '26rpx',
					padding: 0,

				},
				action: "https://gjwy.nephil.cn/sys/annex/fastDFSUploadImg",
				productListData: [],
				orderId: "",
				orderInfo: {},
				taskPicture: [],
				resultPicture: [],
				scoringPicture: [],
				collectionData: [],
				userInfo: {}
			}
		},
		onLoad(data) {
			this.userInfo = uni.getStorageSync('user')
			this.orderId = data.id
			this.getProductById()
			this.getCollectionAll()
		},
		methods: {
			getCollectionAll() {
				this.$u.api.getCollectionAll({
					createUserId: uni.getStorageSync('user').id
				}).then(res => {
					this.collectionData = res.items
				})
			},
			getProductById() {
				this.$u.api.getProductById({
					id: this.orderId
				}).then(res => {
					this.orderInfo = res
					if (!!this.orderInfo.taskPicture) {
						this.taskPicture = this.orderInfo.taskPicture.split(',')
					}
					if (!!this.orderInfo.resultPicture) {
						this.resultPicture = this.orderInfo.resultPicture.split(',')
					}
					if (!!this.orderInfo.scoringPicture) {
						this.scoringPicture = this.orderInfo.scoringPicture.split(',')
					}
				})
			},
			// 取消订单
			quxiao() {
				uni.showModal({
					content: '您是否要取消订单',
					success: res1 => {
						if (res1.confirm) {
							let param = {
								id: this.orderInfo.id,
								taskState: 1,
								executorId: 'clear'
							}
							this.$u.api.productUpdate(param).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '取消订单成功',
									});
									setTimeout(function() {
										this.$u.api.smsQuxiao({
											phoneNumber: this.userInfo.gongMobile
										});
										this.$u.api.smsQuxiao({
											phoneNumber: this.orderInfo.mobile
										});
										uni.navigateBack()
									}, 1200);
								}
							})
						} else if (res1.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			// 开工
			kaigong() {
				let param = {
					id: this.orderInfo.id,
					taskState: 3,
					startDate: new Date(+new Date() + 8 * 3600 * 1000).toJSON().substr(0, 19).replace("T", " "),
				}
				this.$u.api.productUpdate(param).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: '已开工',
							type: 'success'
						})
						this.getProductById()
					}
				})
			},
			// 完工
			wangong() {
				let files = []
				this.$refs.uUpload.lists.forEach(element => {
					files.push(element.response.filePath)
				})
				if (files.length > 0) {
					let param = {
						id: this.orderInfo.id,
						resultPicture: files.join(","),
						taskState: 4,
						endDate: new Date(+new Date() + 8 * 3600 * 1000).toJSON().substr(0, 19).replace("T", " "),
					}
					// 增加工程款
					this.$u.api.engineeringUpdate({
						id: this.orderInfo.createUserId,
						money: this.orderInfo.price,
						type: 1
					}).then(res => {})
					this.$u.api.productUpdate(param).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								title: '已完工，待甲方付款',
								type: 'success'
							})
							this.getProductById()
						}
					})
				} else {
					this.$refs.uToast.show({
						title: '请上传完工图片',
						type: 'error'
					})
				}
			},
			taskStateStyle(val) {
				// 1未接单 2未开工 3进行中 4已完工 5已付款 6已评价 7已作废
				let name = ""
				if (val.auditState == 1) {
					name = "#ff0000"
				} else if (val.auditState == 3) {
					name = "#ff0000"
				} else if (val.taskState == 1) {
					name = "#ff9b06"
				} else if (val.taskState == 2) {
					name = "#ff9b06"
				} else if (val.taskState == 3) {
					name = "#409EFF"
				} else if (val.taskState == 4) {
					name = "#409EFF"
				} else if (val.taskState == 5) {
					name = "#67C23A"
				} else if (val.taskState == 6) {
					name = "#67C23A"
				} else if (val.taskState == 7) {
					name = "#F56C6C"
				}
				return name
			},
			shoucang(val) {
				let name = false
				this.collectionData.forEach(res => {
					if (res.objectId == val.id) {
						name = true
					}
				})
				return name
			},
			addShou(val) {
				let param = {
					objectId: val.id,
				}
				this.$u.api.collectionAdd(param).then(res => {
					this.getCollectionAll()
				})
			},
			deleteShou(val) {
				let id = ""
				this.collectionData.forEach(res => {
					if (res.objectId == val.id) {
						id = res.id
					}
				})
				this.$u.api.collectionDelete({
					id: id
				}).then(res => {
					this.getCollectionAll()
				})
			},
			makePhoneCall(val) {
				uni.makePhoneCall({
					phoneNumber: val //仅为示例
				});
			},
			toChart(val) {
				uni.navigateTo({
					url: '/pages/chat/index'
				});
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '自定义分享标题',
				path: '/pages/template2/orderDetail?id=' + this.orderId
			}
		},
		filters: {
			taskStateName(val) {
				// 1未接单 2未开工 3进行中 4已完工 5已付款 6已评价 7已作废
				let name = ""
				if (val.auditState == 1) {
					name = "待审核"
				} else if (val.auditState == 3) {
					name = "已驳回"
				} else if (val.taskState == 1) {
					name = "未接单"
				} else if (val.taskState == 2) {
					name = "未开工"
				} else if (val.taskState == 3) {
					name = "施工中"
				} else if (val.taskState == 4) {
					name = "已完工"
				} else if (val.taskState == 5) {
					name = "已付款"
				} else if (val.taskState == 6) {
					name = "已评价"
				} else if (val.taskState == 7) {
					name = "已作废"
				}
				return name
			},
			dateFormat(val) {
				let name = ""
				if (!!val) {
					name = val.split(' ')[0]
				}
				return name
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100%;
		background-color: #f8f9fb;
		font-size: 26rpx;
		color: #222;
	}
</style>